import React, {
	PureComponent
} from 'react'
import { connect } from 'dva'
import { Form, Button, DatePicker } from 'antd'
import Grid from '@/components/Grid'
import settings, { getPagination } from '@/settings'

@connect(({
	analysis: {
		list = {},
		params
	},
	loading
}) => ({
	list,
	params,
	loading: loading.effects['analysis/fetchAll'],
}))
@Form.create()
class AnalysisPage extends PureComponent {
	state = {
		selectedRows: []
	};
	columns = [{
		title: '部门',
		dataIndex: 'name',
		width: 200,
		sorter: true
	}, {
		title: '创建时间',
		dataIndex: 'date',
		width: 150,
		align: 'center'
	}];
	componentDidMount() {
		const {
			dispatch
		} = this.props;
		dispatch({
			type: 'analysis/fetchAll',
		});
	};
	handleSelectRows = rows => {
		this.setState({
			selectedRows: rows,
		});
	};
	handleGridChange = (oldPagination, sorter) => {
		const { params, dispatch } = this.props;
		
		const pagination = getPagination(oldPagination)
		const payload = {
			...params,
			...pagination
		}

		if (sorter.field) {
			payload.sorter = sorter.field
			payload.order = sorter.order
		}

		dispatch({
			type: 'analysis/fetchAll',
			payload,
		})
	};
	handleReload = () => {
		const { params, dispatch } = this.props;
		dispatch({
			type: 'analysis/fetchAll',
			payload: params
		})
	};
	render() {
		const { selectedRows } = this.state;
		const {
			params,
			loading,
			list: {
				data,
				total
			}
		} = this.props

		const pageNumber = params[settings.pageNumber]
		return (
			<div className="x-wrap">
				<div className="x-panel">
					<div className="x-toolbar">
						<div className="x-query">
							<Form layout="inline">
								<Form.Item label="日期范围">
									<DatePicker
						                showTime
						                placeholder="请选择"
						                format="YYYY-MM-DD HH:mm:ss"
						            />
					            </Form.Item>
					            <Form.Item>
					            	<Button type="primary" onClick={this.handleSearch}>查询</Button>
					            </Form.Item>
							</Form>
						</div>
					</div>
					<div className="x-fixed">
						<Grid 
						selectedRows={selectedRows} 
						onSelectRow={this.handleSelectRows} 
						columns={this.columns} 
						data={data}
						loading={loading}
						pagination={{
							pageNumber,
							total
						}}
						onReload={this.handleReload}
						onChange={this.handleGridChange} />
					</div>
				</div>
			</div>
		)
	}
}

export default AnalysisPage